<template>
	<div
		:class="[
			'app-icon-text',
			`app-icon-text--${position}`,
			`app-icon-text--${size}`,
			{ ['app-icon-text--no-icon']: !hasIcon },
		]"
	>
		<template v-if="position == 'left'">
			<!-- <icon-font v-if="fontIconClass" class="app-icon-text__icon" :type="fontIconClass" /> -->
			<i v-if="iconClass" :class="'app-icon-text__icon ' + iconClass" />
			<img v-else-if="imgPath" class="app-icon-text__img" :src="imgPath" />
		</template>
		<span v-if="text" class="app-icon-text__text">{{
			textPSLanguageRes ? $t(textPSLanguageRes, text) : text
		}}</span>
		<template v-if="position == 'right'">
			<!-- <icon-font v-if="fontIconClass" class="app-icon-text__icon" :type="fontIconClass" /> -->
			<i v-if="iconClass" :class="'app-icon-text__icon ' + iconClass" />
			<img v-else-if="imgPath" class="app-icon-text__img" :src="imgPath" />
		</template>
	</div>
</template>

<script setup lang="ts">
import { iconTextProps } from './icon-text';
const props = defineProps(iconTextProps);
const hasIcon = computed(() => props.iconClass || props.imgPath);
</script>
